<template>
  <div>
    <input type="text" v-model="val" /> <button @click="addList">添加</button>
    <ul>
      <li v-for="(item, i) in list" :key="i">
        <span>{{ item }}</span>

        <i @click="delList(i)">X</i>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
export default {
  // mounted() {
  //   console.log(this.list, "list");
  // },
  //自己的语法体系
  setup() {
    // 必须ref生命 否则没有响应式数据
    let val = ref("");
    let n = ref(10); // n=10  n={value:10}
    //
    let list = ref(["html", "css", "javascript"]); // list:[]  list:{value:[]}
    const delList = (i) => {
      console.log(list.value, "oiko");
      // list.splice(i, 1);
      // console.log(list, "list");
      list.value.splice(i, 1);
    };
    const addList = () => {
      list.value.push(val.value);
      val.value = "";
    };
    //
    onMounted(() => {
      console.log("挂载后");
    });
    return { n, list, delList, val, addList };
  },
};
</script>

<style scoped lang="scss">
li {
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  justify-content: space-between;
}
</style>
